import React, { Component } from 'react';

const Hoc2 = (WrappedComponent) => {
  return class extends WrappedComponent {
    constructor(props) {
      super(props);
      this.state = {
        name: 'Hoc2',
      };
    }

    componentWillMount() {
      console.log('hoc2 will be mounted');
    }

    render() {
      return (
        <div>
          <h2>HOC2 DEBUGGER</h2>
          <p>Props</p> <pre>{JSON.stringify(this.props, null ,2)}</pre>
          <p>State</p> <pre>{JSON.stringify(this.state, null ,2)}</pre>
          <p></p>
          {super.render()}
        </div>
      )
    }

    componentDidMount() {
      console.log('hoc2 did be mounted');
    }

    componentWillUnmount() {
      console.log('hoc2 will be unmounted');
    }
  };
};

export default Hoc2;
